import { useContext } from 'react';

import { cn } from '@/lib/utils';
import { FlowContext } from '@/context';

import { Input } from '../ui/input';

export function FlowName(props: { disabled: boolean }) {
  const flowContext = useContext(FlowContext);
  function NameChanged(value: any) {
    if (value.target.value) {
      flowContext?.setFlow({
        ...flowContext,
        name: value.target.value,
      });
      console.log('context', flowContext);
    }
  }
  return (
    <Input
      disabled={props.disabled}
      placeholder="请输入工作流名称"
      className={cn('h-8 md:text-xs')}
      value={flowContext?.name || ''}
      onChange={NameChanged}
    />
  );
}
